<template>
  <div class="">
    <el-card v-if="contentView">
      <el-row>

          <el-col :span="4" style="margin-right: 10px">
            <el-select style="margin-right: 20px;" @change="change" clearable v-model="queryInfo.processKey" placeholder="请选择审批流程">
              <el-option
                v-for="item in listOptions"
                :key="item.code"
                :label="item.name"
                :value="item.code">
              </el-option>
            </el-select>
          </el-col>
<!--          <el-col :span="4" style="margin-right: 10px">-->
<!--            <el-select @change="change" clearable v-model="queryInfo.submitUserName" placeholder="请选择发起人">-->
<!--              <el-option-->
<!--                v-for="item in userList"-->
<!--                :key="item.userId"-->
<!--                :label="item.userName"-->
<!--                :value="item.userName">-->
<!--              </el-option>-->
<!--            </el-select>-->
<!--          </el-col>-->
        <el-col :span="4" style="margin-right: 10px">
          <el-select @change="change" clearable v-model="queryInfo.submitUserName" placeholder="请选择发起人角色">
            <el-option
              v-for="item in allRoles"
              :key="item.id"
              :label="item.roleName"
              :value="item.roleName">
            </el-option>
          </el-select>
        </el-col>




          <el-col :span="2">
            <el-button   type="primary" icon="el-icon-search" @click="seacher">搜索</el-button>
          </el-col>

        <el-col :span="12" style="text-align: right;">
          <div>
            <el-button    type="primary" icon="el-icon-plus" @click="operationView(0)">添加</el-button>
          </div>
        </el-col>
      </el-row>
      <!--表格-->
      <el-table :row-style="{height: '15px'}" :cell-style="{padding:'5px'}" :data="tableData" border v-loading="loading">
        <!--  <el-table-column type="index" label="序号" v-if="false" align="center" width="50">
          </el-table-column> -->
        <el-table-column prop="approvalName" label="流程名称" align="center" width="300"  :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="submitRoleName" label="发起人角色" align="center" width="200"  :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="auditPersons" label="审批人" align="center"  :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center" width="150"  :show-overflow-tooltip="true">
        </el-table-column>
        <!--<el-table-column  label="操作"   align="center" >-->
          <!--<template  slot-scope="scope">-->
            <!--<div v-if="authFilter('new_supplier')">-->
              <!--<el-button type="text" icon="el-icon-edit" @click="operationView(1, scope.row)">编辑</el-button>-->
              <!--<el-button type="text" :loading="scope.row.loading" icon="el-icon-delete" @click="operationView(2, scope.row)">删除</el-button>-->
            <!--</div>-->
          <!--</template>-->
        <!--</el-table-column>-->
      </el-table>
      <el-pagination style="text-align: center;" :disabled="loading" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="queryInfo.pageNo" :page-sizes="[25,50]" :page-size="queryInfo.pageSize" layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </el-card>
    <submitForm v-else :subData="subData" @closeView="closeView" @refresh="refreshTable"></submitForm>
  </div>
</template>


<script>
  import {allProcessList, processDefineDetail, findAuditUsers,pageApprovalList,allRoles} from "@/api/user"
  import { mapState } from "vuex"
  let $this = null
  export default {
    name: 'purchase',
    components: {
    },
    computed: {
      ...mapState(["authList"]),
    },
    data () {
      return {
        contentView: true,
        placeholder: '类别名称',
        loading: false,
        queryInfo: {
          pageNo: 1,
          pageSize: 25,
          submitUserName:'',
          processKey:''
        },
        tableData: [],
        total: 0,
        subData: {
          btnId: '',
          id: ''
        },
        userList: [],
        listOptions: [],
        allRoles:[]

      }
    },
    created () {
      $this = this
      $this.getPageSupplier()

      allProcessList().then(res => {
        this.listOptions = res.data.data
      })
      // findAuditUsers().then(res => {
      //   this.userList = res.data.data
      // })
      allRoles().then(res=>{
        this.allRoles=res.data.data
      })
    },
    methods: {
      change(e) {
        $this.getPageSupplier()
      },
      authFilter (code) {
        let flag = false
        if(this.authList.length) {
          this.authList.forEach(item => {
            if(item.resourceCode == code) {
              flag = true
            }
          })
        }
        return flag
      },
      getPageSupplier () {
        $this.loading = true
        pageApprovalList($this.queryInfo).then(res => {
          $this.loading = false
          $this.tableData = res.data.data.records
          $this.total = res.data.data.total
        }).catch(err => {
          $this.loading = false
          return $this.$message.error(err.message)
        })
      },
      handleCurrentChange (val) {
        $this.queryInfo.pageNo = val
        $this.getPageSupplier()
      },
      handleSizeChange (size) {
        $this.queryInfo.pageSize = size
        $this.getPageSupplier()
      },
      seacher (key) {

        $this.getPageSupplier()
      },
      operationView (btnId, row) {
        if (btnId === 0) {
          $this.subData.btnId = btnId
          $this.contentView = false
        } else if (btnId === 1) {
          $this.subData.btnId = btnId
          $this.subData.id = row.id
          $this.contentView = false
        } else if (btnId === 2) {
          $this.$set(row, 'loading', true)
          $this.deleteDict(row)
        } else {
          return $this.$message.error('操作错误')
        }
      },
      // 删除
      deleteDict (row) {
        deleteDict(row.id).then(res => {
          $this.$set(row, 'loading', false)
          $this.getPageSupplier()
          return $this.$message.success('删除成功')
        }).catch(err => {
          $this.$set(row, 'loading', false)
          return $this.$message.error('操作错误')
        })
      },
      // 返回table
      closeView () {
        $this.contentView = true
      },
      refreshTable () {
        $this.getPageSupplier()
        $this.contentView = true
      }
    }
  }
</script>
<style scoped>

</style>
